<template>
  <div class="a">
    <p>森林火险预警</p>
    <div class="yjsz">
      <p>预警设置</p>
      <el-button type="small">因子设置</el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="自动分析" name="first">
          <div class="zdfx">
            <div>
              <span>预警日期</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>预警时次</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="btn">
            <el-button type="small">分析</el-button>
            <el-button type="small">成图</el-button>
            <el-button type="small">因子值</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="手动标绘" name="second">
          <div class="sdbh">
            <div class="left">
              <el-button type="small" style="width: 150px"
                >精细化格点预报</el-button
              >
              <ul>
                <li style="background-color: yellow">黄色</li>
                <li style="background-color: orange">橙色</li>
                <li style="background-color: red">红色</li>
              </ul>
            </div>
            <div class="right">
              <el-button type="small">实况信息</el-button>
              <el-button type="small">预报信息</el-button>
              <el-button type="small">森林分布图</el-button>
              <el-button type="small">行政裁剪</el-button>
              <el-button type="small">删除</el-button>
              <el-button type="small">清空绘区</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="选择乡镇"> </el-table-column>
        <el-table-column prop="name" label="预警区域"> </el-table-column>
        <el-table-column prop="address" label="预警等级"> </el-table-column>
      </el-table>
    </div>
    <div class="btns">
      <el-button type="small">自动</el-button>
      <el-button type="small">手动</el-button>
      <el-button type="small">删除</el-button>
      <el-button type="small">提交审核</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
};
</script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  justify-content: center;
  .yjsz {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px;
    }
    .el-button {
      width: 100px;
    }
    /deep/.el-tabs {
      width: 100%;
      font-size: 10px;
      margin-top: 10px;
    }
    .zdfx {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      div {
        margin: 5px;
        span {
          margin-right: 10px;
        }
      }
    }
    .sdbh {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .el-button {
        margin: 5px;
      }
      ul {
        width: 150px;
        height: 80px;
        border: 1px solid #dedede;
        li {
          text-align: center;
          line-height: 26px;
        }
      }
    }
  }
  .table {
    margin-top: 10px;
    width: 100%;
  }
  .btns {
    margin-top: 10px;
  }
}
</style>
